<template>
  <div class="container">
    <div class="searchContainer">
      <el-form :model="formData" label-width="80px" size="mini">
        <el-row>
          <el-col :span="8">
            <el-form-item label="班级">
              <el-select v-model="formData.classId" clearable >
                <el-option
                  v-for="(item,index) in classList"
                  :key="index"
                  :label="item.className"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学生姓名">
              <el-input v-model="formData.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="searchOne">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="dataContainer">
      <!-- <div class="optionContainer">
        <el-button type="primary" size="mini" @click="addNew($event, 'add')"
          >新增</el-button
        >
      </div> -->
      <el-table
        :data="tableData"
        :height="500"
        size="small"
        header-row-class-name="headClass"
        highlight-current-row
        border
      >
        <el-table-column prop="id" label="id"> </el-table-column>
        <el-table-column prop="schoolId" label="学校id"> </el-table-column>
        <el-table-column prop="classesId" label="班级id"> </el-table-column>
        <el-table-column prop="userName" label="姓名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="phoneNumber" label="手机号"> </el-table-column>

        <el-table-column fixed="right" width="100" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="addNew(scope.row, 'edit')"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="paginationContainer">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="currentChange"
        :current-page.sync="currentPage"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="dialogType === 'add' ? '新增' : '编辑'"
      :visible.sync="showDialog"
      @close="handleClose"
    >
      <el-form
        :model="dialogForm"
        label-width="80px"
        label-position="left"
        size="mini"
        ref="dialogForm"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="学校" prop="schoolId">
              <el-select v-model="dialogForm.schoolId" disabled>
                <el-option
                  v-for="(item, index) in schoolList"
                  :key="index"
                  :label="item.schoolName"
                  :value="item.id"
                  
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="班级" prop="classesId">
              <el-select v-model="dialogForm.classesId" disabled>
                <el-option
                  v-for="(item, index) in classList"
                  :key="index"
                  :label="item.className"
                  :value="item.id"
                  
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="学生姓名" prop="userName">
              <el-input v-model="dialogForm.userName" readonly></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="密码" prop="password">
              <el-input v-model="dialogForm.password" readonly></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="手机号" prop="phoneNumber">
              <el-input v-model="dialogForm.phoneNumber" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="dialogForm.email" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <div class="btn-wrapper">
        <el-button type="primary" size="mini" @click="add">确认</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import {
  searchAllStudent,
  addStudent,
  editStudent,
  searchStudentById,
  searchAllSchool,
  searchClassById,
} from "@/api/api";
export default {
  data() {
    return {
      schoolList: [],
      classList: [],
      formData: {
        classId: '',
        userName: ''
      },
      dialogForm: {
          schoolId: '',
          classesId: '',
        userName: "",
        password: "",
        phoneNumber: "",
        email: "",
        status: "",
      },
      showDialog: false,
      pageForm: {
        pageSize: 10,
        pageNo: 1,
      },
      currentPage: 1,
      dialogType: "",
      tableData: [],
      total: 0,
    };
  },
  created() {
    this.searchClassById();
    this.searchAllStudent(this.pageForm.pageNo)
  },
  // watch: {
  //     'dialogForm.schoolId': {
  //         handler: function(newVal, oldVal) {
  //             console.log(newVal)
  //             console.log(oldVal)
  //             if (newVal) {
  //                 console.log('watch')
  //                 this.dialogForm.classesId = ''
  //                 this.searchClassById()
  //             }
  //         }
  //     }
  // },
  methods: {
      searchClassById() {
        let schooldId = JSON.parse(window.localStorage.getItem('roleInfo')).schoolId
          let params = {
              schoolId: schooldId
          }
          searchClassById(params)
            .then(res => {
                console.log(res)
                if (res.code === 200) {
                    this.classList = res.detailData
                }
            })
            .catch(err => {
                console.log(err)
            })
      },
    searchAllSchool() {
      searchAllSchool()
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.schoolList = res.detailData;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    searchOne() {
      console.log(this.formData)
      let params = {
        classId: this.formData.classId,
        userName: this.formData.userName,
        pageSize: this.pageForm.pageSize,
        pageNo: this.pageForm.pageNo
      }
      searchAllStudent(params)
        .then(res => {
          console.log(res)
          if (res.code === 200) {
            this.tableData = res.detailData.records
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    add() {
      if (this.dialogType === "add") {
        addStudent(this.dialogForm)
          .then((res) => {
            this.$nextTick(() => {
              this.$refs.dialogForm.resetFields();
              console.log(this.dialogForm);
            });

            this.showDialog = false;

            this.searchAllStudent(this.pageForm.pageNo);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        editStudent(this.dialogForm)
          .then((res) => {
            this.showDialog = false;
            console.log(this.currentPage);
            this.currentPage = 1;
            this.searchAllStudent(this.pageForm.pageNo);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    addNew(row, type) {
      this.showDialog = true;
      this.dialogType = type;
      this.searchAllSchool()
      if (type === "edit") {
        Object.assign(this.dialogForm, row);
        console.log(this.dialogForm);
        console.log(this.classList)
      }
    },
    searchAllStudent(pageNo) {
      let params = {
        userName: "",
        schoolId: JSON.parse(window.localStorage.getItem('roleInfo')).schoolId,
        classId: "",
        pageSize: this.pageForm.pageSize,
        pageNo: pageNo,
      };
      searchAllStudent(params)
        .then((res) => {
          console.log(res);
          this.tableData = res.detailData.records;
          this.total = res.detailData.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    currentChange(val) {
      this.searchAllStudent(val);
    },
    handleClose() {
        for(let key in this.dialogForm) {
         this.dialogForm[key] = ''
      }
    }
  },
};
</script>

<style lang="less" scoped>
.searchContainer {
  background-color: #fff;
  margin: 10px 0;
  padding-top: 20px;
}
.dataContainer {
  background-color: #fff;
  padding: 20px;
  .optionContainer {
    margin-bottom: 10px;
    text-align: left;
  }
}
.btn-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.paginationContainer {
  margin-top: 20px;
  text-align: right;
}
</style>